<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!--为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，
       需要在网页的 head 之中添加 viewport meta 标签-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body>
 <div class="container">
    <h1>Hello World</h1>
     <div class="row">
         <div class="col-md-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px
#444;">
             <p>哈哈这是我的第一个box
         </p>
             <p>这是第二段内容
             </p>
         </div>
         <div class="col-md-8" style="background-color: #dedef8;box-shadow: inset 10px -1px 1px #444,inset -10px -1px 1px #444">
            <div class="row">
                 <div class="col-md-4">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                     enim ad minim veniam, quis nostrud exercitation ullamco laboris
                     nisi ut aliquip ex ea commodo consequat.
                 </p>
                 </div>
            </div>
             <div class="row">
                 <div class="col-md-8">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                     enim ad minim veniam, quis nostrud exercitation ullamco laboris
                     nisi ut aliquip ex ea commodo consequat.
                 </p>
                 </div>
             </div>
         </div>
     </div>
    <div class="row">
        <h1>this is  row</h1>
        <!-- col-xs-2 div所占的列数  col-md-offset-6 div 其实的位置-->
        <div class="col-xs-2 col-md-offset-6" style="background-color: #dedef8;box-shadow: inset 10px -1px 1px #444,inset -10px -1px 1px #444">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.
            </p>

        </div>

    </div>

     <div class="row">
         <table class="table table-striped table-bordered table-hover table-condensed">
             <caption>table basic style</caption>
             <thead>
             <tr >
                 <th>名称</th>
                 <th>城市</th>
             </tr>
             </thead>
             <tbody>
                <tr class="active">
                    <td>tom</td>
                    <td>beijing</td>
                </tr>
                <tr class="danger">
                    <td>耀华</td>
                    <td>上海</td>
                </tr>
             </tbody>
         </table>

     </div>
     <div class="row">
         <h1>表单：垂直(默认) 内联  水平</h1>
         <form role="form">
             <div class="form-group">
                 <label for="name">名称</label>
                 <input type="text" id="name" class="form-control" placeholder="请输入姓名">
             </div>
             <div class="form-group">
                 <label for="inputfile">文件输入</label>
                 <input type="file" id="inputfile">
                 <p class="help-block">这里是块级帮助文本的实例。</p>
             </div>
             <div class="checkbox">
                 <label>
                     <input type="checkbox">请打勾
                 </label>
             </div>
             <button type="submit" class="btn btn-default">提交</button>
         </form>
     </div>
     <div class="row ">
         <h1>表单：垂直(默认) 内联  水平</h1>
         <form role="form" class="form-inline">
             <div class="form-group">
                 <label class="sr-only" for="name2">名称</label>
                 <input type="text" class="form-control" id="name2" placeholder="请输入名称">
             </div>
             <div class="form-group">
                 <label class="sr-only" for="inputfile2">文件输入</label>
                 <input type="file" id="inputfile2">
             </div>
             <div class="checkbox">
                 <label>
                     <input type="checkbox">请打勾
                 </label>
             </div>
             <button type="submit" class="btn btn-default">提交</button>
         </form>
     </div>
     <div class="row ">
         <h1>表单：垂直(默认) 内联  水平</h1>
         <form role="form" class="form-horizontal">
             <div class="form-group">
                 <label for="firstname" class="col-sm-2 control-label " >名字</label>
                 <div class="col-sm-10">
                     <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
                 </div>
             </div>
             <div class="form-group">
                 <label for="lastname" class="col-sm-2 control-label">姓</label>
                 <div class="col-sm-10">
                     <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
                 </div>
             </div>
             <div class="form-group">
                 <div class="col-sm-offset-2 col-sm-10">
                     <div class="checkbox">
                         <label>
                             <input type="checkbox">请记住我
                         </label>
                     </div>
                 </div>
             </div>
             <div class="form-group">
                 <div class="col-sm-offset-2 col-sm-10">
                     <button type="submit" class="btn btn-default">登录</button>
                 </div>
             </div>
         </form>
     </div>

     <div class="row">
         <button class="btn btn-default" type="button">默认按钮</button>
         <button class="btn btn-primary" type="button">原始按钮</button>
         <button class="btn btn-success" type="button">成功按钮</button>
         <button class="btn btn-info" type="button">信息按钮</button>
         <button class="btn btn-warning" type="button">警告按钮</button>
         <button class="btn btn-danger" type="button">危险按钮</button>

     </div>
     <div class="row">
         <h2>图片</h2>
         <p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>
         <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
     </div>
     <div class="row">
         <div class="dropdown">
             <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                     data-toggle="dropdown">
                 主题
                 <span class="caret"></span>
             </button>
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                 <li role="presentation">
                     <a role="menuitem" tabindex="-1" href="#">Java</a>
                 </li>
                 <li role="presentation">
                     <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
                 </li>
                 <li role="presentation">
                     <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
                 </li>
                 <li role="presentation" class="divider"></li>
                 <li role="presentation">
                     <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
                 </li>
             </ul>
         </div>
     </div>
     <div class="row">

         <div style="padding: 100px 100px 10px;">
             <form class="bs-example bs-example-form" role="form">
                 <div class="input-group">
                     <span class="input-group-addon">用户名</span>
                     <input type="text" class="form-control" placeholder="twitterhandle">
                 </div>
                 <br>
                 <div class="input-group">
                     <input type="text" class="form-control">
                     <span class="input-group-addon">.00</span>
                 </div>
                 <br>
                 <div class="input-group">
                     <span class="input-group-addon">$</span>
                     <input type="text" class="form-control">
                     <span class="input-group-addon">.00</span>
                 </div>
             </form>
         </div>
     </div>
     <div class="row">

     </div>
 </div>




</body>
</html>